<!DOCTYPE html>
<html lang="en">
<head>
    <title>编辑文章</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${base}/res/manage/css/common.css">
    <link href="${base}/res/manage/css/ec.css" rel="stylesheet">
    <link href="${base}/res/manage/css/list.css" rel="stylesheet">
    <script type="text/javascript" src="${base}/res/plugin/jquery/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="${base}/res/plugin/validator/jquery.validate.min.js"></script>
    <script type="text/javascript" src="${base}/res/admin/js/common.js"></script>
[#include "/admin/include/plupload.ftl" /]
[#include "/admin/include/ueditor.ftl" /]
    <script type="text/javascript">
        var ue = UE.getEditor('editor', {
            initialFrameHeight: 300,
            initialFrameWidth: 960
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {

            var isOutUrl = $('input:radio[name="isOutUrl"]:checked').val();
            if (isOutUrl == 0) {
                // 不是外部链接
                $("#outLink").attr("readOnly", true);
            } else {
                // 外部链接，隐藏内容
                $("#contentTr").hide();
            }

            //图片上传
            var up = extPlupload("${base}", {});

            //表单验证，数据提交
            $("#inputForm").validate({
                errorElement: 'div',
                rules: {
                    title: {
                        required: true,
                        maxlength: "50"
                    },
                    outLink: {
                        url: true
                    },
                    brief: {
                        maxlength: "300"
                    },
                    orders: {
                        required: true
                    },
                    articleType: {
                        required: true
                    }
                },
                messages: {
                    title: {
                        required: "必填项",
                        maxlength: "最多50个字符"
                    },
                    outLink: {
                        url: "请输入正确的网址"
                    },
                    brief: {
                        maxlength: "最多300个字符"
                    },
                    orders: {
                        required: "必填项"
                    },
                    articleType: {
                        required: "必选项"
                    }
                },
                submitHandler: function (form) {
                    // 判断是否是外部链接
                    var isOutUrl = $('input:radio[name="isOutUrl"]:checked').val();
                    if (isOutUrl == 0) {
                        if (UE.getEditor('editor').hasContents() == false) {
                            $.message("error", "内容不能为空");
                            return false;
                        }
                        // 清空外部URL的值
                        $("#outLink").val("");
                    } else {
                        // 是外部链接，则外部URL不能为空
                        var outLink = $("#outLink").val();
                        if (outLink == null || outLink == "") {
                            $.message("error", "外部URL不能为空");
                            return false;
                        }
                        // 清空内容的值
                        UE.getEditor('editor').setContent("");
                    }
                    // 提交
                    form.submit();
                }
            });

            // 是否是外部链接切换
            $("input[name='isOutUrl']").click(function () {
                if ($(this).val() == 0) {
                    // 不是外部链接,清空外部URL并设置成只读
                    $("#outLink").val("");
                    $("#outLink").attr("readOnly", true);
                    // 显示内容
                    $("#contentTr").show();
                } else {
                    // 是外部链接，清空内容，并隐藏
                    UE.getEditor('editor').setContent("");
                    $("#contentTr").hide();
                    // 设置外部URL不为只读
                    $("#outLink").attr("readOnly", false);
                }
            });
        });
    </script>
</head>
<body>
[#--主体--]
<form id="inputForm" name="inputForm" action="update.jhtml" method="post">
    <div class="tab set">
        <h3><a href="list.jhtml">文章管理</a><a href="edit.jhtml?id=${article.id}">> 编辑文章管理</a></h3>
        <div class="tablist message set">
        [#--隐藏字段--]
            <input name="id" id="id" value="${article.id}" type="hidden"/>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td><label>文章标题<span class="cred"> * </span></label></td>
                    <td>
                        <input type="text" id="title" name="title" value="${article.title}" placeholder="文章标题">
                    </td>

                    <td><label>文章分类<span class="cred"> * </span></label></td>
                    <td>
                        <select id="articleType" name="articleType">
                            <option value="">请选择</option>
                        [#list articleTypes as articleType]
                            <option value="${articleType.id}" [#if articleType.id == article.articleType]selected[/#if]>
                                [#if articleType.grade != 0]
                                    [#list 1..articleType.grade as i]
                                        &nbsp;&nbsp;
                                    [/#list]
                                [/#if]
                            ${articleType.name}
                            </option>
                        [/#list]
                        </select>
                        <a href="javascript:;" class="arrows">∨</a>
                    </td>
                </tr>
                <tr>
                    <td><label>排序<span class="cred"> * </span></label></td>
                    <td>
                        <input type="text" id="orders" maxlength="11" name="orders" value="${article.orders}" placeholder="排序(不超过11个字符长度)">
                    </td>

                    <td><label>封面图</label></td>
                    <td>
                        <input id="fileName" name="image" value="${article.image}" type="text" class="uploadTxt"
                               placeholder="封面图(请上传360*200像素的图片)"/>
                        <input id="pickfiles" type="button" value="上传" class="uploadBtn"/>
                    </td>
                </tr>
                <tr>
                    <td><label>是否为外部URL<span class="cred"> * </span></label></td>
                    <td>
                        <label><input type="radio" name="isOutUrl" class="sex" value="0"
                                      [#if !article.isOutUrl]checked[/#if]>否</label>
                        <label><input type="radio" name="isOutUrl" class="sex" value="1"
                                      [#if article.isOutUrl]checked[/#if]>是</label>
                    </td>

                    <td><label>是否置顶<span class="cred"> * </span></label></td>
                    <td>
                        <label><input type="radio" name="isTop" class="sex" value="0" [#if !article.isTop]checked[/#if]>否</label>
                        <label><input type="radio" name="isTop" class="sex" value="1" [#if article.isTop]checked[/#if]>是</label>
                    </td>
                </tr>
                <tr>
                    <td><label>外部URL</label></td>
                    <td>
                        <input type="text" id="outLink" name="outLink" value="${article.outLink}" placeholder="外部URL">
                    </td>

                    <td><label>简介信息</label></td>
                    <td>
                        <textarea id="brief" name="brief" placeholder="简介信息">${article.brief}</textarea>
                    </td>
                </tr>
                <tr id="contentTr">
                    <td><label>内容</label></td>
                    <td colspan="3">
                        <div class="ueWhite">
                            <script id="editor" name="content" type="text/plain">${article.content}</script>
                        </div>
                    </td>
                </tr>
            </table>
            <p class="save">
                <input type="submit" value="保存" class="red">
                <input type="button" value="取消" id="backButton" class="red">
            </p>
        </div>
</form>
</form>
</body>
</html>